<template>
  <!--练习设置-->
  <view class="practiceSettings flex flex-column ">
    <u-toast ref="uToast"></u-toast>
    <EveryDayHead :detail="detail" v-if="practiceType == '1'" type="settings"></EveryDayHead>
    <OnLineHead :detail="detail" v-if="practiceType == '2'" type="settings"></OnLineHead>
    <RivalryHead :detail="detail" v-if="practiceType == '3'" type="settings"></RivalryHead>
    <AwardHead :detail="detail" v-if="practiceType == '4'" type="settings"></AwardHead>
    <view class="line" style="height: 10px"></view>
    <view class="content scroll-y f_1">
      <view v-for="(item, index) in options" :key="index">
        <view v-if="!item.hidden" class="item flex flex-row between item-center" @click="itemCLick(item)">
          <view class="label">{{ item.label }}</view>
          <u-switch activeColor="#37B874" inactiveColor="#D9D9D9" v-if="item.type === 'switch'"
            v-model="detail.allowQueryScore" size="22" asyncChange @change="scoreSwitch">
          </u-switch>
          <u-icon name="arrow-right" size="14" v-else></u-icon>
        </view>
      </view>
    </view>
    <view class="btn-item">
      <view class="btn">发送练测</view>
    </view>
    <AnswerLoginKey ref="AnswerLoginKey" @success="keyCheckSuccess"></AnswerLoginKey>
  </view>
</template>
<script>
import { setUpgPracticeAllowQueryScore, delUpgPractice, getPracticeCountHeader } from "@/improve/services";
import EveryDayHead from "./components/head/EveryDayHead.vue";
import OnLineHead from "./components/head/OnLineHead.vue";
import RivalryHead from "./components/head/RivalryHead.vue";
import AwardHead from "./components/head/AwardHead.vue";
import AnswerLoginKey from "@/improve/join/components/AnswerLoginKey.vue";

export default {
  name: "practiceSettings",
  components: { RivalryHead, OnLineHead, EveryDayHead, AnswerLoginKey, AwardHead },
  data() {
    return {
      upgPracticeUuid: "",
      practiceType: "1",
      detail: {
        allowQueryScore: false
      },
    }
  },
  computed: {
    label() {
      return this.practiceType == '3' ? '竞赛' : this.practiceType == '4' ? '答题' : '练测'
    },
    options() {
      return [
        { label: `进入${this.label}`, type: "link", path: `/improve/join/practiceDetail?upgPracticeUuid=${this.upgPracticeUuid}&practiceType=${this.practiceType}` },
        { label: `${this.label}信息`, type: "link", path: `/improve/publish/editPractice?practiceType=${this.practiceType}&step=1&upgPracticeUuid=${this.upgPracticeUuid}` },
        { label: "试题设置", type: "link", path: `/improve/publish/editPractice?practiceType=${this.practiceType}&step=2&upgPracticeUuid=${this.upgPracticeUuid}` },
        { label: `${this.label}设置`, type: "link", path: `/improve/publish/editPractice?practiceType=${this.practiceType}&step=3&upgPracticeUuid=${this.upgPracticeUuid}` },
        { label: "成绩查询", type: "switch", path: "" },
        { label: `删除${this.label}`, type: "pop", path: "" },
      ]
    }
  },

  methods: {
    // 获取头部信息
    getHeaderInfo() {
      getPracticeCountHeader({ upgPracticeUuid: this.upgPracticeUuid }).then(res => {
        this.detail = res;
      })
    },
    itemCLick(item) {
      if (item.type === 'link') {
        uni.navigateTo({
          url: item.path
        })
      }
      if (item.type === 'pop') {
        //调用后端接口-需要判断是否有练习数据
        uni.showModal({
          title: '提示',
          content: '确定要删除' + this.detail.practiceName,
          success: async (res) => {
            if (res.confirm) {
              await delUpgPractice({ upgPracticeUuid: this.upgPracticeUuid })
              this.$refs.uToast.show({
                type: "success",
                message: "删除成功",
              });
              setTimeout(() => {
                uni.reLaunch({
                  url: '/pages/improve/improve'
                });
              }, 500);
            }
          }
        });
      }
    },
    async scoreSwitch(value) {
      await setUpgPracticeAllowQueryScore({ upgPracticeUuid: this.upgPracticeUuid, allowQueryScore: value })
      this.detail.allowQueryScore = value
      this.$refs.uToast.show({
        type: "success",
        message: "设置成功",
      });
    }
  },
  onLoad(options) {
    this.upgPracticeUuid = options.upgPracticeUuid
    this.practiceType = options.practiceType
  },
  onShow() {
    this.getHeaderInfo()
  }
}
</script>

<style scoped lang="scss">
.practiceSettings {
  background-color: #FFFFFF;
  height: 100vh;
  width: 100vw;

  .line {
    width: 100%;
    background-color: #F5F5F5;
  }

  .btn-item {
    padding-top: 20px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    position: fixed;
    background-color: #FFFFFF;
    box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.12);
    bottom: 0;
    width: 100%;
    z-index: 99;

    .btn {
      background-color: #37B874;
      border-radius: 24rpx;
      width: calc(100% - 40px);
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      font-size: 32rpx;
      color: #FFFFFF;
      margin-left: 20px;
    }
  }

  .content {
    padding-bottom: calc(90px + env(safe-area-inset-bottom));

    .item {
      height: 60px;
      padding: 0 20px;
      border-bottom: solid 1px #F2F2F2;

      .label {
        font-size: 32rpx;
        color: #333333;
      }

      .operate {
        margin-left: 16px;
      }
    }

  }
}
</style>